import React, {useCallback} from 'react';
import {View, StyleSheet, Text, TouchableHighlight} from 'react-native';
import Colors from '../../utils/Colors';
import {useTranslation} from 'react-i18next';
import {useNavigation, useRoute} from '@react-navigation/native';
import PatIcon from '../base/PatIcon';
import {http, api} from '../../http';

const SearchRecommend = ({hotWords}) => {
  const {t} = useTranslation();
  const navigation = useNavigation();
  const {params} = useRoute();
  const hotAction = useCallback(data => {
    return () => {
      console.log(data);
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
  if (params && params.type === 'category') {
    return null;
  } else {
    return (
      <View style={styles.searchRecommend}>
        <View style={styles.recTop}>
          <Text style={styles.toptxt}>{t('search.top')}</Text>
        </View>
        <View style={styles.hotbox}>
          {hotWords.map(item => {
            return (
              <TouchableHighlight
                onPress={hotAction(item)}
                key={item.words}
                activeOpacity={1}
                underlayColor={Colors.white}>
                <View style={styles.hotItem}>
                  <Text style={styles.hotText}>{item.words}</Text>
                </View>
              </TouchableHighlight>
            );
          })}
        </View>
      </View>
    );
  }
};

const styles = StyleSheet.create({
  searchRecommend: {
    marginTop: 20,
    width: '100%',
    paddingLeft: 10,
    paddingRight: 10,
  },
  recTop: {
    height: 20,
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'flex-start',
    flexDirection: 'row',
  },
  toptxt: {
    fontSize: 16,
    color: Colors.patFontGray2,
  },
  hotbox: {
    display: 'flex',
    justifyContent: 'flex-start',
    alignItems: 'center',
    flexDirection: 'row',
    flexWrap: 'wrap',
  },
  hotItem: {
    marginRight: 15,
    marginTop: 20,
    paddingLeft: 10,
    paddingRight: 10,
    height: 30,
    borderWidth: 1,
    borderColor: Colors.patBg,
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
  },
  hotText: {
    color: Colors.patFontColor,
    fontSize: 12,
  },
});

export default SearchRecommend;
